// src/editor/layouts/setting/event.tsx
import { Collapse, Input, Select } from 'antd'
import { ItemType } from '../../types'
import { useLowCodeStore } from '../../store/lowcode'

const componentEventMap = {
  [ItemType.Button]: [
    {
      name: 'onClick',
      label: '点击事件'
    }
  ]
}

const componentMethodsMap = {
  [ItemType.Button]: [
    {
      name: 'startLoading',
      label: '开始Loading'
    },
    {
      name: 'endLoading',
      label: '结束Loading'
    }
  ]
}

const ComponentEvent = () => {
  const { curComponent, curComponentId, updateComponentProps } = useLowCodeStore()

  // 事件类型改变
  function typeChange(eventName: string, value: string) {
    if (!curComponentId) return
    updateComponentProps(curComponentId, { [eventName]: { type: value } })
  }

  // 消息类型改变
  function messageTypeChange(eventName: string, value: string) {
    if (!curComponentId) return
    updateComponentProps(curComponentId, {
      [eventName]: {
        ...curComponent?.props?.[eventName],
        config: {
          ...curComponent?.props?.[eventName]?.config,
          type: value
        }
      }
    })
  }

  // 消息文本改变
  function messageTextChange(eventName: string, value: string) {
    if (!curComponentId) return
    updateComponentProps(curComponentId, {
      [eventName]: {
        ...curComponent?.props?.[eventName],
        config: {
          ...curComponent?.props?.[eventName]?.config,
          text: value
        }
      }
    })
  }

  if (!curComponent) return null

  return (
    <div className="px-[12px]">
      {(componentEventMap[curComponent.name] || []).map((setting) => {
        return (
          <Collapse key={setting.name} defaultActiveKey={setting.name}>
            <Collapse.Panel header={setting.label} key={setting.name}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div>动作：</div>
                <div>
                  <Select
                    style={{ width: 160 }}
                    options={[
                      { label: '显示提示', value: 'showMessage' },
                      { label: '组件方法', value: 'componentFunction' }
                    ]}
                    onChange={(value) => {
                      typeChange(setting.name, value)
                    }}
                    value={curComponent?.props?.[setting.name]?.type}
                  />
                </div>
              </div>
              {curComponent?.props?.[setting.name]?.type === 'showMessage' && (
                <div className="flex flex-col gap-[12px] mt-[12px]">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div>类型：</div>
                    <div>
                      <Select
                        className="w-[160px]"
                        options={[
                          { label: '成功', value: 'success' },
                          { label: '失败', value: 'error' }
                        ]}
                        onChange={(value) => {
                          messageTypeChange(setting.name, value)
                        }}
                        value={curComponent?.props?.[setting.name]?.config?.type}
                      />
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div>文本：</div>
                    <div>
                      <Input
                        className="w-[160px]"
                        onChange={(e) => {
                          messageTextChange(setting.name, e.target.value)
                        }}
                        value={curComponent?.props?.[setting.name]?.config?.text}
                      />
                    </div>
                  </div>
                </div>
              )}

              {curComponent?.props?.[setting.name]?.type === 'componentFunction' && (
                <div className="flex flex-col gap-[12px] mt-[12px]">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div>组件：</div>
                    <div></div>
                  </div>

                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div>方法：</div>
                    <div>
                      <Select
                        style={{ width: 160 }}
                        options={componentMethodsMap[selectedComponent?.name || ''].map((method) => ({
                          label: method.label,
                          value: method.name
                        }))}
                        value={curComponent?.props?.[setting.name]?.config?.method}
                        onChange={(value) => {
                          componentMethodChange(setting.name, value)
                        }}
                      />
                    </div>
                  </div>
                </div>
              )}
            </Collapse.Panel>
          </Collapse>
        )
      })}
    </div>
  )
}

export default ComponentEvent
